<template>
  <div id="pagetop">
    <img src="../../public/img/pagetop.jpg" alt="" />
    <div class="ss">
      <input type="text" name="" id="" placeholder="搜索您想要的商品...." />
      <img src="../../public/img/ss.png" alt="" />
    </div>

    <div class="tit">
      <img src="../../public/img/vips.jpg" alt="" class="t1" /><span
        >会员优品</span
      >
      <img src="../../public/img/fahuo.jpg" alt="" class="t2" /><span
        >最快一小时极速达/全城配</span
      >
      <img src="../../public/img/mendian.jpg" alt="" class="t3" /><span
        >36+全国门店</span
      >
    </div>
    <div id="huiyuanka"><img src="../../public/img/huiyuan.jpg" alt="" /></div>
    <!-- 轮播图 -->
    <div>
      <mt-swipe :style="{ height: h }" class="lb">
        <mt-swipe-item>
          <img src="../../public/img/lb1.jpg" alt="" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../../public/img/lb2.jpg" alt="" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../../public/img/lb3.jpg" alt="" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../../public/img/lb4.jpg" alt="" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 导航分类 -->
    <div class="nav">
      <div>
        <router-link to="/myfenlei?sid=1" class="nav">
          <a href="">
            <img src="/img/guopshu.jpg" alt="" />
            <p>肉蛋果蔬</p>
          </a>
        </router-link>
      </div>
      <div>
        <router-link to="/myfenlei?sid=2" class="nav">
          <a href="">
            <img src="/img/rupin.jpg" alt="" />
            <p>乳品烘焙</p>
          </a>
        </router-link>
      </div>
      <div>
        <router-link to="/myfenlei?sid=4" class="nav">
          <a href="">
            <img src="/img/ganhuo.jpg" alt="" />
            <p>粮油干货</p>
          </a>
        </router-link>
      </div>
    </div>
    <div class="nav1">
      <div>
        <router-link to="/myfenlei?sid=5" class="nav1">
          <a href="">
            <img src="/img/jiushui.jpg" alt="" />
            <p>名酒水饮</p>
          </a>
        </router-link>
      </div>
      <div>
        <router-link to="/myfenlei?sid=6" class="nav1">
          <a href="">
            <img src="/img/baojian.jpg" alt="" />
            <p>营养保健</p>
          </a>
        </router-link>
      </div>
      <div>
        <router-link to="/myfenlei?sid=3" class="nav1">
          <a href="">
            <img src="/img/jianguo.jpg" alt="" />
            <p>零食速食</p>
          </a>
        </router-link>
      </div>
    </div>
    <!-- 新年味 -->
    <div class="xn" style="width: 100%">
      <img src="/img/xinnian.jpg" alt="" />
    </div>
    <!-- 极速达 全球好货 -->
    <div class="xn" style="width: 100%; margin-top: 10px">
      <img src="/img/daohang.jpg" alt="" />
    </div>

    <!-- 商品列表 -->
    <div
      class="good"
      style="margin-bottom: 54px"
      v-infinite-scroll="loadmore"
      infinite-scroll-distance="70"
      :infinite-scroll-immediate-check="true"
    >
      <div class="goods" v-for="(item, i) in cats" :key="i">
        <router-link :to="`/details?cid=${item.cid}`" class="router">
          <img :src="`${item.c_pic}.jpg`" alt="" />
        </router-link>
        <p class="name">{{ item.c_name }}</p>
        <p class="pic">¥{{ item.c_price }}</p>
        <a href="">
          <img class="gouwuche" src="../../public/img/gouwuche.jpg" alt="" />
        </a>
      </div>
    </div>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="shoye"
        >首页
        <img
          v-if="selected == 'shoye'"
          slot="icon"
          src="../assets/shoye2.png"
        />
        <img v-else slot="icon" src="../assets/shoye1.png" />
      </mt-tab-item>
      <mt-tab-item id="fenlei" @click.native.capture="getfenlei"
        >分类
        <img
          v-if="selected == 'fenlei'"
          slot="icon"
          src="../assets/fenlei2.png"
        />
        <img v-else slot="icon" src="../assets/fenlei1.png" />
      </mt-tab-item>
      <mt-tab-item id="shopcar" @click.native.capture="getto"
        >购物车
        <img
          v-if="selected == 'shopcar'"
          slot="icon"
          src="../assets/shopcar2.png"
        />
        <img v-else slot="icon" src="../assets/shopcar1.png" />
      </mt-tab-item>
      <mt-tab-item id="me" @click.native.capture="getdata"
        >我的
        <img v-if="selected == 'me'" slot="icon" src="../assets/me2.png" />
        <img v-else slot="icon" src="../assets/me1.png" />
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      h: "210px",
      selected: "shoye",
      cats: [],
      page: 1,
     loading:false //用于标识 列表是否正在加载中
    };
  },
  mounted() {
    this.initSwipe(); //初始化轮播图
    this.initNav();
  },
  // 当前页面变为激活状态时触发
  activated(){this.loading=false},
  // 当前页面变为非激活状态时触发
  deactivated(){this.loading=true},
  methods: {
    //触底加载
    loadmore() {
   if(this.loading) return; //如果正在加载中,则直接return
    this.loading=true 
      let page = this.page++;
      console.log(page);
      this.axios.get(`/shop/goods?page=${page}`).then((res) => {
        console.log(res);
        this.cats.push(...res.data.data);
        console.log(this.loading);
        this.loading=false
      });
    },
    getdata() {
      this.$router.push("/mymessage");
    },
    getto() {
      this.$router.push("/myshopcar");
    },
    getfenlei() {
      this.$router.push("/myfenlei");
    },
    initSwipe() {
      let screenW = window.screen.width;
      let picw = 1242;
      let pich = 698;
      let swipeh = Math.floor((pich * screenW) / picw) + "px";
      this.h = swipeh;
    },
    //初始化导航
    initNav() {
      this.axios.get("/shop/goods?page=1").then((res) => {
        console.log(res);
        this.cats = res.data.data;
        console.log(this.cats);
      });
    },
  },
};
</script>

<style scoped>
.t1 {
  position: relative;
  left: 15px;
  top: -2px;
  text-align: center;
}
.t2 {
  position: relative;
  left: 15px;
  top: -1px;
  text-align: center;
}
.t3 {
  position: relative;
  left: 15px;
  top: -1px;
  text-align: center;
}
.tit > img {
  width: 15px;
}
.name {
  margin-top: 3px;
  font-size: 14px;
  font-weight: bolder;
  color: #333;
  height: 80px}
.pic {
  color: red;
  font-weight: bolder;
}
.router {
  width: 167px;
  /*  */
  /* border:  1px solid rgb(175, 175, 175);; */
  border-radius: 10px;
  background: white;
}
.router > img {
  width: 167px;
  height: 167px;
;
}
#pagetop {
  background-color: #d8d8d84f;
}
.goods p {
  margin-top: 10px;
  margin-left: 12px;
}

.good {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.goods {
  width: 167px;
  margin: 7px 8px;
  /* border:  1px solid rgb(175, 175, 175);; */
  border-radius: 10px;
  background: white;
  overflow: hidden;
  text-overflow:ellipsis;

}
.goods a {
  border-right: 10px;
}
.gouwuche {
  width: 25px;
  height: 25px;
  position: relative;
  left: 123px;
  top: -21px;
}
.xn {
  margin: 0 auto;
}
.xn img {
  width: 95%;
  border-radius: 10px;
  margin: 10px 8px;
}
.nav,
.nav1 {
  display: flex;
  justify-content: space-around;
  border-right: 20px;
}
.nav p,
.nav1 p {
  font-size: 8px;
  text-align: center;
  margin-left: -3px;
  color: black;
}
.nav img,
.nav1 img {
  width: 40px;
  height: 40px;
  border-right: 20px;
  margin: 10px 0;
}
.ss img {
  width: 20px;
  height: 20px;
  position: relative;
  left: 9px;
  top: -32px;
}
.ss {
  margin-top: 10px;
  margin: 3px auto;
  width: 95%;
  margin-bottom: 5px;
}
.ss input {
  width: 90%;
  border: 0px;
  border-right: 10px;
  background: #ffffff;
  color: #9e9c9c;
  padding-left: 33px;
  margin-bottom: 5px;
  height: 32px;
}
#huiyuanka {
  margin: 0 auto;
  margin-top: 5px;
  width: 95%;
}
#huiyuanka img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.lb {
  margin: 0 auto;
  margin-top: 5px;
  width: 95%;
  border-radius: 10px;
}
.lb img {
  width: 100%;
}
#sousuo {
  height: 50px;
  padding: 0px;
}
#pagetop {
  padding: auto;
  width: 100%;
}
#pagetop > img {
  width: 100%;
}
#tit > span {
  font-size: 6px;
}
.mint-searchbar {
  padding: 0px;
}
#huiyuanka > img {
  width: 100%;
  height: 52px;
}
.tit {
  margin-top: -18px;
  font-size: 8px;
  display: flex;
  justify-content: space-around;

  align-items: center;
}
</style>
